<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/jsp/common/taglibs.jsp"%>
<bsl:layout-render name="/WEB-INF/jsp/common/layout.jsp">
<bsl:layout-component name="html-head">
	<link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/css/jquery.fileupload-ui.css" />
	<link rel="stylesheet" href="<%=request.getContextPath()%>/css/jqtransform.css" type="text/css" media="all" />
	<link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/css/viewCommentDetails.css" />
	<script charset="utf-8" src="<%=request.getContextPath()%>/editor/kindeditor-min.js"></script>
	<script charset="utf-8" src="<%=request.getContextPath()%>/editor/lang/zh_CN.js"></script>
	
	<script src="<%=request.getContextPath()%>/js/jquery.ui.widget.js"></script>
	<script src="<%=request.getContextPath()%>/js/tmpl.js"></script>
	<script src="<%=request.getContextPath()%>/js/load-image.js"></script>
	<script src="<%=request.getContextPath()%>/js/canvas-to-blob.min.js"></script>
	<script src="<%=request.getContextPath()%>/js/bootstrap.min.js"></script>
	<script src="<%=request.getContextPath()%>/js/bootstrap-image-gallery.js"></script>
	<script src="<%=request.getContextPath()%>/js/jquery.iframe-transport.js"></script>
	<!-- The basic File Upload plugin -->
	<script src="<%=request.getContextPath()%>/js/jquery.fileupload.js"></script>
	<!-- The File Upload file processing plugin -->
	<script src="<%=request.getContextPath()%>/js/jquery.fileupload-fp.js"></script>
	<!-- The File Upload user interface plugin -->
	<script src="<%=request.getContextPath()%>/js/jquery.fileupload-ui.js"></script>
	<script src="<%=request.getContextPath()%>/js/locale.js"></script>
	<script src="<%=request.getContextPath()%>/js/upload.main.js"></script>
	<script src="<%=request.getContextPath()%>/js/jquery.jqtransform.js"></script>
	<script>
	var editors = [];
	
	$(function(){
		var options1 = {navigation: 'hover',direction:  'left'};
	     $('.ppy3').popeye(options1);
		$("#offerRate").val('${subComment.offerRateObject.integerPart}');
		var editorList = $("textarea[name='comment.content']");
		$.each(editorList, function(i, val) {
			KindEditor.ready(function(K) {
			editors[i] =	K.create(val, {
					resizeType : 1,
					allowPreviewEmoticons : false,
					allowImageUpload : true,
					filePostName:'kindImgFile',
					uploadJson:'harry/fileUpload',
					afterUpload : function(self, data) {
		                  addCommentPhotos(data.id, val.parentNode.id);
		               },
		               afterChange : function() {
						      //限制字数
						      var limitNum = 500;  //设定限制字数
						      var pattern = '还可以输入' + limitNum + '字';
						      $('#' + val.parentNode.id +'1').html(pattern); //输入显示
						      if(this.count('text') > limitNum) {
						       pattern = ('字数超过限制，请适当删除部分内容');
						       //超过字数限制自动截取
						       var strValue = editor.text();
						       strValue = strValue.substring(0,limitNum);
						       editor.text(strValue);      
						       } else {
						       //计算剩余字数
						       var result = limitNum - this.count('text');
						       pattern = '还可以输入' +  result + '字';
						       }
						       $('#' + val.parentNode.id +'1').html(pattern); //输入显示
						      ////////
						     } ,
					items : [
						 'emoticons', '|', 'image']
				});
			});
		});
	});
	

	function sync() {
		$.each(editors, function(i, editor) {
			editor.sync("comment.content");
		});
	}

	function articleComment(form)
	{
		sync();
		form.submit();
	}

	function replyComment(form) {
		sync();
		form.submit();
		
	}
	</script>
	
</bsl:layout-component>
<bsl:layout-component name="title">
评论-${ comment.title}
</bsl:layout-component>
<bsl:layout-component name="content" >
<c:set var="contextPath" value="<%=request.getContextPath()%>"></c:set>
<div class="head_nav" >
	
	<a href="${contextPath}/viewArticleDetails?article.id=${comment.article.id}" rel="external" title="${comment.article.title}">${comment.article.title}</a>
	&nbsp;&gt;&gt;&nbsp; <a href="${contextPath}/viewCommentList?article.id=${comment.article.id}">评论区</a>
	<c:if test="${not empty topComment}">
		&nbsp;&gt;&gt;&nbsp;<a href="${contextPath}/viewComment?comment.id=${topComment.id}">${topComment.title}</a>
	</c:if>

</div>

   <div class="comment_core">
   
   		<div class="comment_entry">
               	
         <div class="entry_left">
			   		    <div style="clear: both;"></div>
			   			<div class="user_icon">
			          		 <a href="#" onclick="return false;" target="_blank"><img src="${contextPath}${comment.createByUser.headPhoto.thumbnailMini}" alt="" title=""></a>
			      		</div>
		 </div>
		 <div class="entry_right">
			   			<div class="comment_header">
			   				<div class="header_left comment_title">
			   					<span>${comment.title}</span>
			   				</div>
			   				
			   				<div class="header_right">
			   					<a href="${contextPath}/viewComment?comment.id=${comment.id}">回应(${comment.subCommNum})</a>
			   				</div>
			   			</div>
			   			<c:if test="${comment.property == 1}">
			   			 <div class="user_rate_s">
									    <div class="big_rate_bak_s">
									        <b rate="2">&nbsp;</b>
									        <b rate="4">&nbsp;</b>
									        <b rate="6">&nbsp;</b>
									        <b rate="8">&nbsp;</b>
									        <b rate="10">&nbsp;</b>
									        <div id="big_rate_up_c${comment.id}" class="big_rate_up_s" style="width: 123.20000000000002px; display: block; height: 26px; " ></div>
									    </div>
							</div>
						<script type="text/javascript">
						 showRateSmall('c${comment.id}', '${comment.offerRateObject.integerPart}', '${comment.offerRateObject.integerPart}');
						</script>
						<c:set value="60px" var="marginLeft"></c:set>
					 </c:if>
					  <div class="entry-meta" style="margin-left: ${marginLeft}">
		                    		 <a href="${contextPath }/viewCustomerInfo?customer.id=${comment.createByUser.id}" title="${comment.createByUser.userName}" target="_blank">${comment.createByUser.userName}</a>
			                        <span>
			                        	<jsp:include page="../common/timeFormat.jsp">
											<jsp:param value="${comment.createTime.time}" name="time"/>
											<jsp:param value="${comment.createTime.year }" name="year"/>
											<jsp:param value="${comment.createTime.month }" name="month"/>
											<jsp:param value="${comment.createTime.day}" name="day"/>
											<jsp:param value="${comment.createTime.hours}" name="hours"/>
											<jsp:param value="${comment.createTime.minutes}" name="minutes"/>
											<jsp:param value="${comment.createTime.date}" name="date"/>
										</jsp:include>
			                        </span>
			                        <c:if test="${ isAdmin eq 'yes' || user.userName eq comment.createByUser.userName}">
											&nbsp;|&nbsp;<a href="${contextPath}/deleteComment?comment.id=${comment.id}&article.id=${comment.article.id}" >删除</a>
									</c:if>
		               </div>
		               <div class="comment_main">
		              <c:if test="${not empty comment.album.photos}">
            	 	    <div class="ppy3">
								<ul class="ppy-imglist">
									<c:forEach items="${comment.album.photos}" var="photo">
										<li>
							                  <a href="${contextPath}${photo.thumbnailLarge}">
							                      <img src="${contextPath}${photo.thumbnailSmall}" alt="">
							                  </a>
							                  <c:if test="${not empty photo.description}">
							                  	<span class="ppy-extcaption">
							                      <strong>${photo.description}</strong>
							                  	</span>
							                  </c:if>
							                  
							              </li>
									</c:forEach>
							              
							      </ul>
							        <div class="ppy-outer">
							                <div style="background-image: url(&quot;${contextPath}${article.album.coverPhoto.thumbnailSmall}&quot;);" class="ppy-stage">
							                    <div class="ppy-counter">
							                        <strong class="ppy-current">1</strong> / <strong class="ppy-total">9</strong> 
							                    </div>
							               	</div>
							                <div class="ppy-nav">
							                        <a class="ppy-next" title="下一张">下一张</a>
							                        <a class="ppy-prev" title="上一张">上一张</a>
							                </div>
							       </div>
							       <div style="visibility: hidden; height: 0px; overflow: hidden;" class="ppy-caption">
							                <span class="ppy-text">
							                       
							                </span>
							       </div>
							</div>
            			   </c:if>
		               		<div class="comment_content_brief">
		                    ${comment.content}
		                 </div>
		                
		          </div>
		                
		</div>
		 <div style="clear: both;"></div>
	             <div class="vote_btns">
		      		<button onclick="scoreComment('${comment.id}', 1)" type="button" class="btn btn-info">支持</button><span style="color: #aaa" id="goodComm${comment.id}">(${comment.goodNum})</span>&nbsp;&nbsp;
		      		<button onclick="scoreComment('${comment.id}', 2)" type="button" class="btn">反对</button><span style="color: #aaa" id="badComm${comment.id}">(${comment.badNum})</span>
		 </div>
   </div>
        	
 </div>
	        
<div class="comment_core_s" >
        <c:forEach var="subComment" varStatus="vs" items="${subComments}">
            <div class="comment_entry">
            		 <div class="entry_left">
			   		    <div style="clear: both;"></div>
			   			<div class="user_icon_s">
			          		 <a href="#" onclick="return false;" target="_blank"><img src="${contextPath}${comment.createByUser.headPhoto.thumbnailMiniS}" alt="" title=""></a>
			      		</div>
					 </div>
					 
					  <div class="entry_right_s">
			   			<div class="comment_header  user_info">
			   				<div class="header_left">
			   					<a href="${contextPath }/viewCustomerInfo?customer.id=${subComment.createByUser.id}" title="${subComment.createByUser.userName}" target="_blank">${subComment.createByUser.userName}</a>
			                        <span>
			                        	<jsp:include page="../common/timeFormat.jsp">
											<jsp:param value="${subComment.createTime.time}" name="time"/>
											<jsp:param value="${subComment.createTime.year }" name="year"/>
											<jsp:param value="${subComment.createTime.month }" name="month"/>
											<jsp:param value="${subComment.createTime.day}" name="day"/>
											<jsp:param value="${subComment.createTime.hours}" name="hours"/>
											<jsp:param value="${subComment.createTime.minutes}" name="minutes"/>
											<jsp:param value="${subComment.createTime.date}" name="date"/>
										</jsp:include>
			                        </span>
										<c:if test="${ isAdmin eq 'yes' || user.userName eq subComment.createByUser.userName}">
											&nbsp;|&nbsp;<a href="${contextPath}/deleteComment?comment.id=${subComment.id}&article.id=${comment.article.id}&parentComment.id=${comment.id}" >删除</a>
										</c:if>
			   				</div>
			   				<div class="header_right">
			   					<a onclick="scoreComment('${subComment.id}', 1)">支持<span id="goodComm${subComment.id}">(${subComment.goodNum})</span></a><a onclick="scoreComment('${subComment.id}', 2)">反对<span id="badComm${subComment.id}">(${subComment.badNum})</span></a><a onclick="switchReply('comm${subComment.id}','${user.userName}', '${contextPath}/viewLogin')">回应(${subComment.subCommNum})</a><a target="_blank" href="${contextPath}/viewComment?comment.id=${subComment.id}">详细</a>
			   					
			   				</div>
			   			</div>
			   			<div class="comment_main">
			   			<c:if test="${not empty subComment.album.photos}">
            	 	    <div class="ppy3">
								<ul class="ppy-imglist">
									<c:forEach items="${subComment.album.photos}" var="photo">
										<li>
							                  <a href="${contextPath}${photo.thumbnailLarge}">
							                      <img src="${contextPath}${photo.thumbnailSmall}" alt="">
							                  </a>
							                  <c:if test="${not empty photo.description}">
							                  	<span class="ppy-extcaption">
							                      <strong>${photo.description}</strong>
							                  	</span>
							                  </c:if>
							                  
							              </li>
									</c:forEach>
							              
							      </ul>
							        <div class="ppy-outer">
							                <div style="background-image: url(&quot;${contextPath}${subComment.album.coverPhoto.thumbnailSmall}&quot;);" class="ppy-stage">
							                    <div class="ppy-counter">
							                        <strong class="ppy-current">1</strong> / <strong class="ppy-total">9</strong> 
							                    </div>
							               	</div>
							                <div class="ppy-nav">
							                        <a class="ppy-next" title="下一张">下一张</a>
							                        <a class="ppy-prev" title="上一张">上一张</a>
							                </div>
							       </div>
							       <div style="visibility: hidden; height: 0px; overflow: hidden;" class="ppy-caption">
							                <span class="ppy-text">
							                       
							                </span>
							       </div>
							</div>
            			 </c:if>
            			 
            			   <c:choose>
            	 	<c:when test="${empty subComment.parentComment && subComment.parentCommentId != 0}">
            	 		<div class="feederback_outer">
            	 			 <div class="feedback_deleted" >
								<span class="entry-content">引用信息已被删除</span>
							</div>
			                   
		                </div>
            	 	</c:when>
            	 	<c:otherwise>
            	 		<c:if test="${subComment.parentCommentId != comment.id && subComment.parentCommentId != 0}">
		                     <div class="reference_conment" >
							<div class="user_info">
								<div class="info_left entry-meta">
									<a href="${contextPath }/viewCustomerInfo?customer.id=${subComment.parentComment.createByUserId}" title="${subComment.parentComment.createByUser.userName}" target="_blank">${subComment.parentComment.createByUser.userName}</a>
									<span>
										<jsp:include page="../common/timeFormat.jsp">
											<jsp:param value="${subComment.parentComment.createTime.time}" name="time"/>
											<jsp:param value="${subComment.parentComment.createTime.year }" name="year"/>
											<jsp:param value="${subComment.parentComment.createTime.month }" name="month"/>
											<jsp:param value="${subComment.parentComment.createTime.day}" name="day"/>
											<jsp:param value="${subComment.parentComment.createTime.hours}" name="hours"/>
											<jsp:param value="${subComment.parentComment.createTime.minutes}" name="minutes"/>
											<jsp:param value="${subComment.parentComment.createTime.date}" name="date"/>
										</jsp:include>
									</span>
								</div>
								<div class="info_right ">
		                      	  		<a onclick="scoreComment('${subComment.parentComment.id}', 1)">支持<span id="goodComm${subComment.parentComment.id}">(${subComment.parentComment.goodNum})</span></a><a onclick="scoreComment('${subComment.parentComment.id}', 2)">反对<span id="badComm${subComment.parentComment.id}">(${subComment.parentComment.badNum})</span></a><a href="${contextPath}/viewDiscussDetails?comment.id=${subComment.parentComment.id}">回应(${subComment.parentComment.subCommNum})</a>
		                       	</div> 
							</div>
							<div style="width: 95%" class="entry-content">${subComment.parentComment.brief}</div> 
						  </div> 
		            </c:if>
		            	  
            	 	</c:otherwise>
           		</c:choose>
		               		<div class="comment_content_brief">
		                    ${subComment.content}
		                 </div>
		                 <c:if test="${subComment.subCommNum != 0}">
	               			<div class="feedBack" >
	               			<div class="feedback_header">回应</div>
	               			<c:forEach items="${subComment.summarySubComments}" var="summaryFeedback" varStatus="vs">
	               				<c:choose>
	               					<c:when test="${vs.count < subComment.subCommNum}">
	               						<c:set value="border-bottom: 1px dashed #CCC;" var="border_style"></c:set>
	               					</c:when>
	               					<c:otherwise>
	               						<c:set value="" var="border_style"></c:set>
	               					</c:otherwise>
	               				</c:choose>
	               			
	               				<div class="feedBack_item" style="${border_style}"  onmouseover="showFeedBackTailsInfo(${summaryFeedback.id});" onmouseout="hideFeedBackTailsInfo(${summaryFeedback.id})">
	               					 <div class="feedback_user_icon">
		          						  <a href="#" onclick="return false;" target="_blank"><img src="${contextPath}${summaryFeedback.createByUser.headPhoto.thumbnailMiniS}" alt="" title=""></a>
		          				   </div>
	               					<div class="feedback_details"><a>${ summaryFeedback.createByUser.userName}:</a>${summaryFeedback.brief}</div>
	               					<div id="feedback_tails${summaryFeedback.id}" class="feedback_tails">
	               						<a href="${contextPath}/viewComment?comment.id=${summaryFeedback.id}">回应(${summaryFeedback.subCommNum})</a>
	               					</div> 
	               				</div>
	               			</c:forEach>
	               			<c:if test="${subComment.subCommNum > 5}">
	               				<div class="feedBack_item" style="text-align:center" >
	               					<a href="${contextPath}/viewComment?comment.id=${subComment.id}">查看全部回复</a>
	               				</div>
	               			</c:if>
	               			
	               		</div>
	               		</c:if>
		               
             <div style="clear: both"></div>
            	
		          </div>
		           <div style="clear: both"></div>
	           <div id="comm${subComment.id}" class="reply_area" >
	        	
	            <div class="reply_user_icon">
	                      <a href="#" onclick="return false;" target="_blank"><img src="${contextPath}${user.headPhoto.thumbnailMiniS}" alt="" title=""></a>
	             </div>
	             	<form action="${contextPath}/saveSubComment" method="post">
	             		
		                <div class="area_input_form" >
		                			
		                    <div id="formContent${subComment.id}">
		                    	<div id="formContent${subComment.id}1" class="word_surplus sign-text"></div>
		                    	<textarea id="reply${subComment.id}" name="comment.content" style="height:63px;width:400px;"></textarea>
		                    	<input  type="hidden" name="article.id" value="${comment.article.id}">
		                    	<input type="hidden" name="parentComment.id" value="${subComment.id}"  />
		                    	<input type="hidden" name="superComment.id" value="${comment.id}"  />
		                    	<input type="hidden" name="subProperty" value="10"  />
		                    </div>
		                    
                            <div style="replay_btn" >
                            	<button onclick="replyComment(this.form)" type="button" class="btn btn-info"  >回 应</button>
                            </div>
		                </div>
	               </form>
	            </div>
			</div> 
		</div>
     </c:forEach>
 </div>

   <div style="clear: both"></div>
	
	
	 <div class="core_footer">
		  <div class="footer_left">
				  <button type="button" class="btn btn-danger" onclick="switchReply('pub_area','${user.userName}', '${contextPath}/viewLogin')">
				  	发表评论
				  </button>
		   </div>
		   
		   <div class="footer_right">
		   		<jsp:include page="../common/pageNum.jsp">
   					<jsp:param value="viewComment?comment.id=${comment.id}&" name="actionName"/>
   					<jsp:param value="${page}" name="page"/>
   	   			 </jsp:include>
		   </div>
	</div>
	
		
   	    
        <div id="pub_area" class="reply_area_bottom" >
        	
        	<div class="comment_entry" >
        	
              <div class="entry_left">
		   		<div style="clear: both;"></div>
		   			<div class="user_icon">
		          		 <a href="#" onclick="return false;" target="_blank"><img src="${contextPath}${comment.createByUser.headPhoto.thumbnailMini}" alt="" title=""></a>
		          		
		      		</div>
		      		<a href="${contextPath }/viewCustomerInfo?customer.id=${comment.createByUser.id}" title="${comment.createByUser.userName}" target="_blank">${comment.createByUser.userName}</a>
		   		</div>
		   		<div class="entry_right">
		   			<form action="${contextPath}/saveSubComment" method="post">
             		
		                <div class="reply_bottom_input"" >
		                			
		                    <div id="formContent${comment.id}">
		                    	<div id="formContent${comment.id}1" class="word_surplus sign-text"></div>
		                    	<textarea name="comment.content" style="height:200px;width:520px;"></textarea>
		                    	<input  type="hidden" name="article.id" value="${comment.article.id}">
		                    	<input type="hidden" name="superComment.id" value="${comment.id}"  />
		                    	<input type="hidden" name="parentComment.id" value="${comment.id}"  />
		                    	<input type="hidden" name="subProperty" value="10"  />
		                    </div>
		                    
		                    <div class="reply_bottom_btn" >
		                            	<button type="button" class="btn btn-info" onclick="articleComment(this.form)">评论</button>
		                     </div>
		                </div>
              	 </form>
		   		</div>
		  </div>

       </div>

</bsl:layout-component>
</bsl:layout-render>